<template>
	<view>
		<home v-if="PageCur=='home'" :key="commponent1Key"></home>
		<gateway ref="gateway" :cur="PageCur" v-if="PageCur=='gateway'" :key="commponent3Key"></gateway>
		<people v-if="PageCur=='people'" :key="commponent2Key"></people>
		<!-- 		<view class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='gateway'?'action text-green':'action text-gray'" @click="NavChange" data-cur="gateway">
				<image @click="NavChange" data-cur="gateway" class="icon2" referrerpolicy="no-referrer"
					:src="PageCur == 'gateway' ? '/static/home/128/homeC.png' : '/static/home/128/home.png' " />
				<view class='cuIcon-homefill'></view>门户
			</view>
			<view :class="PageCur=='people'?'action text-green':'action text-gray'" @click="NavChange" data-cur="people">
				<view class='cuIcon-people'></view>个人
			</view>
		</view> -->
		<view class="Footer">
			<view class="main" @click="NavChange('gateway')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'gateway' ? '/static/home/128/homeC.png' : '/static/home/128/home.png' " />
				<text :class="['info2',PageCur == 'gateway' ? 'blue':'']">首页</text>
			</view>
			<view class="main" @click="NavChange('people')">
				<image class="image" referrerpolicy="no-referrer"
					:src="PageCur == 'people' ? '/static/home/128/myC.png' : '/static/home/128/my.png' " />
				<text :class="['info2',PageCur == 'people' ? 'blue':'']">我的</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				hackReset:true,
				PageCur: 'gateway',
				commponent1Key: 0,
				commponent2Key: 0,
				commponent3Key: 0,
			}
		},
		// onHide(){
		// 	console.log('111111111111111111111111111')
		// 	this.PageCur = 'gateway'
		// },
		onShow: function() {
			// console.log('0987654567898765456789876543')
			// this.$nextTick(function(){
			// 	this.$refs.gateway.getinto()
			// })
			this.PageCur = 'gateway'
				++this.commponent1Key
				++this.commponent2Key
				++this.commponent3Key
			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			})
		},
		methods: {
			NavChange(PageCur) {
				this.PageCur = PageCur
			}

		}
	}
</script>

<style>
	.info2 {
		color: #cdcdcd;
		font-size: 11px;
	}

	.blue {
		color: #4ba0fd;
	}

	.Footer {
		background-color: white;
		height: 58px;
		margin-top: 1px;
		width: 100%;
		display: flex;
		box-shadow: 0 -0.5px 3px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		z-index: 5;
	}

	.main {
		text-align: center;
		padding-top: 8px;
		display: flex;
		flex-direction: column;
		width: 50%;
		padding-bottom: 7px;
	}

	.main .image {
		width: 21px;
		height: 21px;
		display: block;
		margin: auto;
	}

	/* .main2 {
		width: 629rpx;
		height: 44rpx;
		flex-direction: row;
		display: flex;
		margin: 19rpx 0 0 61rpx;
	}
	
	.icon2 {
		width: 43rpx;
		height: 43rpx;
		margin-top: 1rpx;
	}
	
	.label3 {
		width: 42rpx;
		height: 44rpx;
		margin-left: 152rpx;
	}
	
	.label4 {
		width: 42rpx;
		height: 40rpx;
		margin: 2rpx 0 0 156rpx;
	}
	
	.label5 {
		width: 43rpx;
		height: 42rpx;
		margin: 1rpx 0 0 151rpx;
	}
	
	.main3 {
		width: 629rpx;
		height: 22rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 17rpx 0 23rpx 61rpx;
	}
	
	.info1 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.txt3 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.word6 {
		width: 43rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	}
	
	.info2 {
		width: 43rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		font-size: 22rpx;
		font-family: Adobe Heiti Std R;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		display: block;
	} */
</style>
